<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3</title>
        <link href="default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var myPoints=new Array();

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();  
                var nederland = new google.maps.LatLng(52.153714, 5.194287);
                var myOptions = {
                    zoom:7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: nederland
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                calcRoute();
            }
  
            function calcRoute() {
                var start = "${van}"; 
                var end = "${naar}";
                var request = {
                    origin:start, 
                    destination:end,
   
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        getAllSteps(response);
                    }
      
                });
            }
            
            function getAllSteps(directionResult){
                //document.write(directionResult.routes[0].overview_path[0].toString()); //ipv string kan ook lat() of lng()

                var msg = "";
                for(var x = 0 ; x < directionResult.routes[0].overview_path.length ; x++) {
                    myPoints[x] = directionResult.routes[0].overview_path[x].toString();
                    msg = msg + directionResult.routes[0].overview_path[x].toString()+ "\n"; 
                }
                msg = msg + "eind";
                document.write("______xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx______________<br>");
                alert(msg);
            }
            
        </script>
    </head>
    <body onload="initialize()">

<div id="menu">
  <ul>
    <li><a href="index.jsp" accesskey="1">Home</a></li>
    <li class="active"><a href="index.jsp" accesskey="2">Ride</a></li>
    <li><a href="index.jsp" accesskey="3">Links</a></li>
    <li><a href="index.jsp" accesskey="4">About</a></li>
    <li><a href="index.jsp" accesskey="5">Contact</a></li>
  </ul>
</div>
<div id="header">
  <h1>Dryves</h1>
  <h2></h2>   
  
  <div id="map_canvas" style="top: -213px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; left: 241px; width: 514px; height: 213px;"></div>
        
</div>
      
<div id="wrapper">
  <div id="content">

    <div id="links">
      <ul>
        <li>
          <h2>Route</h2>
          <ul>
          <br></br>
        <p>De reis gaat van ${van}</p>
        <p>naar de plaats ${naar}</p>
        <a href="index.jsp">terug naar index</a>
          </ul>
        </li>

      </ul>
    </div>
    <div style="clear: both;">&nbsp;</div>
  </div>
</div>

        <div id="footer">
  <p id="legal">Copyright &copy; Dryves. </p>
  <p id="brand">Dryves</p>
</div>
    </body>
</html>
